<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声破天 - 搜索</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/search.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                        fill="white">声破天</text>
                </svg>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item active">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span>探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="#" id="following-link" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span
                                data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span
                                data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <div class="content-container search-content">
                <!-- 搜索框 -->
                <div class="search-box-container">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="search-input" data-i18n-placeholder="search_placeholder"
                            placeholder="搜索歌曲、艺术家、专辑...">
                        <button id="clear-search" class="clear-search-btn"><i class="fas fa-times"></i></button>
                    </div>
                </div>

                <!-- 历史搜索及推荐 -->
                <div class="search-history-section" id="history-section">
                    <div class="search-section-header">
                        <h2 data-i18n="recent_searches">最近搜索</h2>
                        <button class="clear-history-btn" data-i18n="clear_history">清除历史</button>
                    </div>
                    <div class="history-items">
                        <div class="history-item">
                            <div class="history-icon"><i class="fas fa-history"></i></div>
                            <div class="history-text">晴天</div>
                            <button class="remove-history"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                </div>

                <!-- 搜索结果区域 -->
                <div class="search-results-container" id="results-container" style="display: none;">
                    <!-- 顶部热门结果 -->
                    <div class="top-result-section">
                        <h2 data-i18n="top_result">热门结果</h2>
                        <div class="top-result-card">
                            <img src="assets/images/covers/cover2.jpg" alt="热门结果">
                            <h3 class="top-result-title">晴天</h3>
                            <p class="top-result-artist" data-i18n="artist_jay">周杰伦</p>
                            <p class="top-result-type"><span data-i18n="song">歌曲</span> • 《叶惠美》</p>
                            <button class="play-top-result"><i class="fas fa-play"></i></button>
                        </div>
                    </div>

                    <!-- 歌曲结果 -->
                    <div class="songs-result-section">
                        <div class="search-section-header">
                            <h2 data-i18n="songs">歌曲</h2>
                            <a href="#" class="view-all" data-i18n="view_all">查看全部</a>
                        </div>
                        <div class="songs-list">
                            <div class="song-item">
                                <div class="song-rank">1</div>
                                <div class="song-info">
                                    <img src="assets/images/covers/cover2.jpg" alt="歌曲封面">
                                    <div class="song-details">
                                        <div class="song-title">晴天</div>
                                        <div class="song-artist" data-i18n="artist_jay">周杰伦</div>
                                    </div>
                                </div>
                                <div class="song-album">叶惠美</div>
                                <div class="song-duration">4:29</div>
                                <div class="song-actions">
                                    <button class="song-action-btn"><i class="far fa-heart"></i></button>
                                    <button class="song-action-btn"><i class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="song-item">
                                <div class="song-rank">2</div>
                                <div class="song-info">
                                    <img src="assets/images/covers/cover4.jpg" alt="歌曲封面">
                                    <div class="song-details">
                                        <div class="song-title">晴天的周末</div>
                                        <div class="song-artist">李宇春</div>
                                    </div>
                                </div>
                                <div class="song-album">野蛮生长</div>
                                <div class="song-duration">3:45</div>
                                <div class="song-actions">
                                    <button class="song-action-btn"><i class="far fa-heart"></i></button>
                                    <button class="song-action-btn"><i class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="song-item">
                                <div class="song-rank">3</div>
                                <div class="song-info">
                                    <img src="assets/images/covers/cover7.jpg" alt="歌曲封面">
                                    <div class="song-details">
                                        <div class="song-title">晴天娃娃</div>
                                        <div class="song-artist">孙燕姿</div>
                                    </div>
                                </div>
                                <div class="song-album">我要的幸福</div>
                                <div class="song-duration">4:05</div>
                                <div class="song-actions">
                                    <button class="song-action-btn"><i class="far fa-heart"></i></button>
                                    <button class="song-action-btn"><i class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="song-item">
                                <div class="song-rank">4</div>
                                <div class="song-info">
                                    <img src="assets/images/covers/cover5.jpg" alt="歌曲封面">
                                    <div class="song-details">
                                        <div class="song-title">雨天和晴天</div>
                                        <div class="song-artist">王力宏</div>
                                    </div>
                                </div>
                                <div class="song-album">星</div>
                                <div class="song-duration">3:57</div>
                                <div class="song-actions">
                                    <button class="song-action-btn"><i class="far fa-heart"></i></button>
                                    <button class="song-action-btn"><i class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 艺术家结果 -->
                    <div class="artists-result-section">
                        <div class="search-section-header">
                            <h2 data-i18n="artists">艺术家</h2>
                            <a href="#" class="view-all" data-i18n="view_all">查看全部</a>
                        </div>
                        <div class="artists-grid">
                            <div class="artist-card">
                                <div class="artist-img">
                                    <img src="assets/images/artists/artist1.jpg" alt="艺术家照片">
                                </div>
                                <h3 data-i18n="artist_jay">周杰伦</h3>
                                <p data-i18n="artist">艺术家</p>
                            </div>
                            <div class="artist-card">
                                <div class="artist-img">
                                    <img src="assets/images/artists/artist5.jpg" alt="艺术家照片">
                                </div>
                                <h3 data-i18n="artist_jj">林俊杰</h3>
                                <p data-i18n="artist">艺术家</p>
                            </div>
                            <div class="artist-card">
                                <div class="artist-img">
                                    <img src="assets/images/artists/artist6.jpg" alt="艺术家照片">
                                </div>
                                <h3 data-i18n="artist_leehom">王力宏</h3>
                                <p data-i18n="artist">艺术家</p>
                            </div>
                            <div class="artist-card">
                                <div class="artist-img">
                                    <img src="assets/images/artists/artist3.jpg" alt="艺术家照片">
                                </div>
                                <h3 data-i18n="artist_eason">陈奕迅</h3>
                                <p data-i18n="artist">艺术家</p>
                            </div>
                        </div>
                    </div>

                    <!-- 专辑结果 -->
                    <div class="albums-result-section">
                        <div class="search-section-header">
                            <h2 data-i18n="albums">专辑</h2>
                            <a href="#" class="view-all" data-i18n="view_all">查看全部</a>
                        </div>
                        <div class="albums-grid">
                            <div class="album-card">
                                <div class="album-img">
                                    <img src="assets/images/covers/cover2.jpg" alt="专辑封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3>叶惠美</h3>
                                <p data-i18n="artist_jay">周杰伦</p>
                            </div>
                            <div class="album-card">
                                <div class="album-img">
                                    <img src="assets/images/covers/cover4.jpg" alt="专辑封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3>野蛮生长</h3>
                                <p>李宇春</p>
                            </div>
                            <div class="album-card">
                                <div class="album-img">
                                    <img src="assets/images/covers/cover7.jpg" alt="专辑封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3>我要的幸福</h3>
                                <p>孙燕姿</p>
                            </div>
                            <div class="album-card">
                                <div class="album-img">
                                    <img src="assets/images/covers/cover5.jpg" alt="专辑封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3>星</h3>
                                <p>王力宏</p>
                            </div>
                        </div>
                    </div>

                    <!-- 播放列表结果 -->
                    <div class="playlists-result-section">
                        <div class="search-section-header">
                            <h2 data-i18n="playlists">播放列表</h2>
                            <a href="#" class="view-all" data-i18n="view_all">查看全部</a>
                        </div>
                        <div class="playlists-grid">
                            <div class="playlist-card">
                                <div class="playlist-img">
                                    <img src="assets/images/covers/cover9.jpg" alt="播放列表封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3 data-i18n="playlist_jay">周杰伦精选</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </div>
                            <div class="playlist-card">
                                <div class="playlist-img">
                                    <img src="assets/images/covers/cover8.jpg" alt="播放列表封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3 data-i18n="chinese_golden_hits">华语金曲</h3>
                                <p data-i18n="playlist_by_shengpotian">播放列表 • 声破天</p>
                            </div>
                            <div class="playlist-card">
                                <div class="playlist-img">
                                    <img src="assets/images/covers/cover10.jpg" alt="播放列表封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3 data-i18n="playlist_2024">2024 热门歌曲</h3>
                                <p data-i18n="playlist_by_shengpotian">播放列表 • 声破天</p>
                            </div>
                            <div class="playlist-card">
                                <div class="playlist-img">
                                    <img src="assets/images/covers/cover6.jpg" alt="播放列表封面">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                                <h3 data-i18n="playlist_rock">摇滚经典</h3>
                                <p data-i18n="playlist_by_shengpotian">播放列表 • 声破天</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 热门类别 - 当没有搜索时显示 -->
                <div class="browse-categories" id="browse-section">
                    <div class="search-section-header">
                        <h2 data-i18n="browse_categories">浏览分类</h2>
                    </div>
                    <div class="categories-grid">
                        <div class="category-card" style="background-color: #E13300;">
                            <h3 data-i18n="pop">流行</h3>
                            <img src="assets/images/categories/pop.jpg" alt="流行">
                        </div>
                        <div class="category-card" style="background-color: #7358FF;">
                            <h3 data-i18n="hiphop">嘻哈</h3>
                            <img src="assets/images/categories/hiphop.jpg" alt="嘻哈">
                        </div>
                        <div class="category-card" style="background-color: #1E3264;">
                            <h3 data-i18n="rock">摇滚</h3>
                            <img src="assets/images/categories/rock.jpg" alt="摇滚">
                        </div>
                        <div class="category-card" style="background-color: #E8115B;">
                            <h3 data-i18n="electronic">舞曲</h3>
                            <img src="assets/images/categories/dance.jpg" alt="舞曲">
                        </div>
                        <div class="category-card" style="background-color: #8C1932;">
                            <h3 data-i18n="mandopop">华语</h3>
                            <img src="assets/images/categories/chinese.jpg" alt="华语">
                        </div>
                        <div class="category-card" style="background-color: #006450;">
                            <h3 data-i18n="jazz">爵士</h3>
                            <img src="assets/images/categories/jazz.jpg" alt="爵士">
                        </div>
                        <div class="category-card" style="background-color: #777777;">
                            <h3 data-i18n="rnb">R&B</h3>
                            <img src="assets/images/categories/rnb.jpg" alt="R&B">
                        </div>
                        <div class="category-card" style="background-color: #509BF5;">
                            <h3 data-i18n="category_focus">专注</h3>
                            <img src="assets/images/categories/focus.jpg" alt="专注">
                        </div>
                        <div class="category-card" style="background-color: #D84000;">
                            <h3 data-i18n="category_new">新发行</h3>
                            <img src="assets/images/categories/new.jpg" alt="新发行">
                        </div>
                        <div class="category-card" style="background-color: #AF2896;">
                            <h3 data-i18n="category_workout">健身</h3>
                            <img src="assets/images/categories/workout.jpg" alt="健身">
                        </div>
                        <div class="category-card" style="background-color: #8D67AB;">
                            <h3 data-i18n="category_mood">心情</h3>
                            <img src="assets/images/categories/mood.jpg" alt="心情">
                        </div>
                        <div class="category-card" style="background-color: #148A08;">
                            <h3 data-i18n="category_indie">独立</h3>
                            <img src="assets/images/categories/indie.jpg" alt="独立">
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">当前</h4>
                    <p class="artist-name">晴天 - 周杰伦</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script src="assets/js/app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化公共功能
            if (typeof initCommonFeatures === 'function') {
                initCommonFeatures();
            }
            
            // 初始化底部播放器状态
            if (typeof initPlayerStateSync === 'function') {
                initPlayerStateSync();
            }
        });
    </script>
    <script src="assets/js/search.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/sidebar-utils.js"></script>
</body>

</html>